<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{ title === 'add' ? $t('notification.edit.newNotification') : title === 'update' ? $t('notification.edit.updateNotification') : $t('notification.edit.notificationDetails')}}</span></el-col>
      </el-row>
      <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;padding-right: 40px">
        <el-form :model="notice" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('notification.edit.notificationType')">
                <template>
                  <dict-select v-model="notice.type" code="notificationType" :disabled="title === 'check'"></dict-select>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('notification.edit.receiver')">
                <dict-select v-model="notice.receiver" :disabled="title === 'check'" @change="selectValue" code="receiver"></dict-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('notification.edit.notificationTitle')">
                <template>
                  <el-input  v-model="notice.title" :clearable="title !== 'check'" :placeholder="$t('placeholder.name')" :disabled="title === 'check'"></el-input>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="title !== 'check'">
              <el-form-item :label="$t('notification.edit.notificationContent')">
                <template>
                  <Tinymce ref="editor" :height="450" v-model="notice.content"/>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="title === 'check'">
              <el-form-item :label="$t('notification.edit.notificationContent')">
                <el-input type="textarea" v-html="notice.content" :disabled="disabled"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="data-bnt">
      <el-row>
        <el-col>
          <el-button v-if="title === 'check' ? false: hasPublish ? true : false" class="yt-btn-ys" type="primary" @click="release('releaseFinish')">{{$t('notification.edit.release')}}</el-button>
          <el-button v-if="title === 'check' ? false: hasSave ? true : false" class="yt-btn" type="primary" @click="release('releaseWait')">{{$t('notification.edit.draft')}}</el-button>
          <el-button v-if="title === 'check'" class="yt-btn" type="primary" @click="getBack">{{$t('button.back')}}</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce';
  import { lookNotification, saveDraft, notificationRelease } from '@/api/admin/notification';
  import { list, selectuserAll } from '@/api/e-formula/notification';
  import { mapGetters } from 'vuex';

  export default {
    name: 'edit',
    components: {
      Tinymce,
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        hasSave: false,
        hasPublish: false,
        config: Config.I18n,
        id: undefined,
        title: undefined,
        disabled: false,
        notice: {
          type: undefined, // 公告类型
          receiver: undefined, // 接收人
          title: undefined, // 公告名称
          content: undefined, // 公告内容
          status: ''
        },
        listQuery: {
          name: '',
          page: 1,
          limit: 10
        },
        reception: '',
        filterText: '',
        dialogAuthorizeVisible: false,
        rolePersonnel: [], // 所有人员
        checkedSelect: [] // 选择的人员
      }
    },
    created() {
      this.hasPublish = this.elements['notificationManagerEdit:btn_publish'];
      this.hasSave = this.elements['notificationManagerEdit:btn_save'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    mounted() {
      this.id = this.$route.query.id;
      this.title = this.$route.query.title;
      console.log(this.$route.query.title, '1111111111')
      if (!this.id) {
        this.notice.id = ''
      }
      if (this.title === 'check') {
        this.disabled = true
        lookNotification(this.$route.query.id).then(res => {
          if (res.data) {
            this.notice = res.data
          }
        })
      } else if (this.title === 'update') {
        lookNotification(this.$route.query.id).then(res => {
          if (res.data) {
            this.notice = res.data
          }
        })
      }
    },
    watch: {
      filterText(val) {
        this.listQuery.name = val;
        this.listQuery.page = 1;
        selectuserAll(this.listQuery).then(res => {
          this.rolePersonnel = res.data.rows
          this.dialogAuthorizeVisible = true
        })
      }
    },
    methods: {
      getBack() {
        this.$router.go(-1);
      },
      selectValue(val) {
        this.reception = val
        if (val === '2') {
          this.checkedSelect = []
          selectuserAll(this.listQuery).then(res => {
            this.rolePersonnel = res.data.rows
            this.dialogAuthorizeVisible = true
          })
        } else if (val === '3') {
          this.checkedSelect = []
          list('role').then(res => {
            this.rolePersonnel = res
            console.log(this.rolePersonnel)
            this.dialogAuthorizeVisible = true
            console.log(res)
          })
        }
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        selectuserAll(this.listQuery).then(res => {
          this.rolePersonnel = res.data.rows
          this.dialogAuthorizeVisible = true
        })
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        selectuserAll(this.listQuery).then(res => {
          this.rolePersonnel = res.data.rows
          this.dialogAuthorizeVisible = true
        })
      },
      release(param) {
        this.notice.list = this.checkedSelect
        console.log(this.notice.list)
        this.notice.status = param
        if (param === 'releaseWait') {
          saveDraft(this.notice).then(res => {
            this.$notify({
              title: res.status === 200 ? this.$t('notification.edit.tips.preserveSuccess') : this.$t('notification.edit.tips.fail'),
              message: res.status === 200 ? this.$t('notification.edit.tips.preserveSuccess') : this.$t('notification.edit.tips.fail'),
              type: res.status === 200 ? 'success' : 'warning'
            })
            this.notice.id = res.data.id
          })
        } else {
          notificationRelease(this.notice).then(res => {
            this.$notify({
              title: res.status === 200 ? this.$t('notification.edit.tips.preserveSuccess') : this.$t('notification.edit.tips.fail'),
              message: res.status === 200 ? this.$t('notification.edit.tips.preserveSuccess') : this.$t('notification.edit.tips.fail'),
              type: res.status === 200 ? 'success' : 'warning'
            })
            this.$router.push('/baseManager/notificationManager')
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .el-textarea__inner {
    min-height: 500px !important;
  }
 /deep/ .el-textarea{
   border: 1px solid #dcdfe6;
   border-radius: 4px;
   padding: 0 20px;
   margin: 0;
   font-size: 14px;
   color: #c0c4cc;
   min-height: 500px;
   background-color: #f5f7fa;
   cursor: not-allowed;
   max-width: 1000px;
    p{
      img{
        width: 100%;
        height: 100%;
        margin: 20px 0;
        border-radius: 4px;
      }
    }
  }
</style>
